<template>
  <v-scale-screen :width="win.screen.width" :height="win.screen.height" fullScreen :delay="500"
    style="margin:0;padding:0;position:relative; ">
    <!-- <video src="../../../static/videoBack6.mp4" autoplay loop controls="no" ref="videoBack"
			style="width:100%;height:100%;" class="videoBack"></video> -->
    <div class="page" id="page">
      <div class="titleBar">
        <span style="float:left; font-size: .48rem;">{{ nowtime }}</span>
        <span class="titleName">{{ titleName }}</span>
        <!-- <iframe width="300" scrolling="no"
                    style="float:left;height:0.6rem;line-height:0.6rem;margin-left:0.2rem;padding-top:0.15rem;font-size:18px!important;"
                    frameborder="0" allowtransparency="true"
                    src="https://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280&color=%23ffffff">
                </iframe> -->
        <!-- 右边的按钮 -->
        <div class="changeWin exit" v-if="screenThree" @click="fullScreenThree">
          <!-- <i class="iconfont icon-quxiaoquanping" title="取消全屏"></i> -->
          <img src="../../static/icon4.png" alt="" title="取消全屏" />
        </div>
        <div class="changeWin exit" v-if="!screenThree" @click="fullScreenThree">
          <img src="../../static/icon5.png" alt="" title="全屏显示 " />
        </div>
        <div class="exit" @click="goExit">
          <span><i class="el-icon-s-fold" style=""></i></span>
          控制台
          <!-- {{ right_top }} -->
        </div>
        <div class="exit" @click="goData" style="margin-right: .5rem;">
          <span><i class="el-icon-data-analysis" style=""></i></span>
          监控中心
        </div>
        <div class="exit" @click="changeMining" style="margin-right: .5rem;">
          <span><i class="el-icon-sort"> </i></span>
          切换项目
        </div>
        <div class="optionListBox" v-show="optionList">
          <div class="oneView over" :class="optionName == item.label ? 'active_2' : ''" v-for="item in options"
            :key="item.value" @click="changeOption(item, $event)">
            <span>{{ item.label }}</span>
          </div>
        </div>
        <!-- <div class="go_data" @click="goData">监控中心</div> -->
      </div>
      <div class="content">
        <div class="left_content">
          <div class="left_top_content">
            <dv-border-box-1>
              <div class="every_border">
                <div class="every_title" @click="equip_data">
                  <dv-border-box-9 :color="['grey', 'blue']">设 备 统 计</dv-border-box-9>
                </div>
                <div class="every_content equip">
                  <div class="equip_zhi" @click="equip_data">
                    <div class="equip_title" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      设 备 总 量
                    </div>
                    <div class="equip_number" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      <!-- {{ equip_data_count.equip_count }} -->120
                    </div>
                  </div>
                  <div class="equip_zhi" @click="equip_data">
                    <div class="equip_title" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      在 线 正 常
                    </div>
                    <div class="equip_number" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      <!-- {{ equip_data_count.online_equip_count }} -->110
                    </div>
                  </div>
                  <div class="equip_zhi" @click="equip_data">
                    <div class="equip_title" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      在 线 报 警
                    </div>
                    <div class="equip_number" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      <!-- {{ equip_data_count.alarm_equip_count }}-->5
                    </div>
                  </div>
                  <div class="equip_zhi" @click="equip_data">
                    <div class="equip_title" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      离 线 设 备
                    </div>
                    <div class="equip_number" :style="{
                      fontSize: win.screen.width >= 2000 ? '.54rem' : '.4rem'
                    }">
                      <!-- {{ equip_data_count.offline_equip_count }} -->5
                    </div>
                  </div>
                </div>
              </div>
            </dv-border-box-1>
          </div>

          <div class="left_middle_content">
            <dv-border-box-1>
              <div class="every_border">
                <div class="every_title">
                  <dv-border-box-9 :color="['grey', 'blue']">实 时 用 电 量</dv-border-box-9>
                </div>
                <div class="every_content water_info" v-if="waterInfo.length">
                  <div class="every_water_info" v-for="(item, index) in waterInfo" :key="index">
                    <div class="water_info_top">
                      <div class="water_info_value">
                        {{ item.value || 0 }}
                      </div>
                      &nbsp;
                      <div class="water_info_unit">
                        {{ item.unit }}
                      </div>
                    </div>
                    <div class="water_info_bottom">
                      {{ item.sensor_name }}
                    </div>
                  </div>
                </div>
                <div class="every_content no_wanter_info" v-else>
                  暂无数据
                </div>
                <!-- id=" article" -->
              </div>
            </dv-border-box-1>
          </div>
          <div class="left_bottom_content">
            <dv-border-box-1>
              <div class="every_border">
                <div class="every_title">
                  <dv-border-box-9 :color="['grey', 'blue']">分 区 统 计</dv-border-box-9>
                </div>
                <div class="every_content" id="classification_water"></div>
              </div>
            </dv-border-box-1>
          </div>
        </div>
        <div class="middle_content">
          <div class="middle_top_content">
            <!-- <dv-border-box-1> -->
            <!-- 中间大的上面的那个三个圆圈 -->
            <div class="water_all_data">
              <!-- <div class="every_title">
                                <dv-border-box-9 :color="['grey', 'blue']">
                                    用水详情统计
                                </dv-border-box-9>
                            </div> -->
              <div class="every_content waterDetails">
                <div class="water_data">
                  <div>
                    <dv-decoration-9 class="decoration" :dur="20">
                      <p>
                        今日用电<br /><br />
                        <b class="number_zhi1">6{{ waterCount.total }} </b>KWH
                      </p>
                    </dv-decoration-9>
                  </div>
                </div>
                <div class="water_data">
                  <div>
                    <dv-decoration-9 class="decoration" :dur="20">
                      <!-- <div class="pp"> -->
                      <p>
                        本月用电<br /><br />
                        <b class="number_zhi2">58{{ waterCount.month }} </b>KWH
                      </p>
                      <!-- </div> -->
                    </dv-decoration-9>
                  </div>
                </div>
                <div class="water_data">
                  <div>
                    <dv-decoration-9 class="decoration" :dur="20">
                      <p>
                        本年用电<br /><br />
                        <b class="number_zhi3">1568{{ waterCount.today }} </b>KWH
                      </p>
                    </dv-decoration-9>
                  </div>
                </div>
              </div>
            </div>
            <!-- 中间大的下面的那个面积曲线 -->
            <div class="moment_flow">
              <!-- <div class="every_title"> -->
              <!-- <div> -->
              <!-- <dv-border-box-9 :color="['grey', 'blue']"> -->

              <!-- </dv-border-box-9> -->
              <!-- </div> -->
              <div class="every_content moment_data" id="moment_flow">
                <!-- <p>分类瞬时流量</p> -->
              </div>
            </div>
          </div>

          <!-- 中间下面的数据 -->
          <div class="middle_bottom_content">
            <dv-border-box-1>
              <!-- :color="['#35b5da', 'yellow']" -->
              <div class="every_border">
                <div class="every_title" @click="alarm_data">
                  <dv-border-box-9 :color="['grey', 'blue']">
                    设 备 报 警 列 表
                  </dv-border-box-9>
                </div>
                <div class="every_content">
                  <div class="flow_data">
                    <dv-scroll-board v-if="alarm.data.length" :config="alarm" class="alarmScrollTable" />
                    <!-- <dv-scroll-board v-else :config="alarm" class="alarmScrollTable" /> -->

                    <!-- <div v-else>22222</div> -->

                    <!---->
                  </div>
                  <!-- {{ alarm.data }} -->
                </div>
              </div>
            </dv-border-box-1>
          </div>
        </div>
        <div class="right_content">
          <div class="right_top_content">
            <dv-border-box-1>
              <div class="every_border">
                <div class="every_title" @click="utensil_data">
                  <dv-border-box-9 :color="['grey', 'blue']">
                    电 表 统 计
                  </dv-border-box-9>
                </div>
                <div class="every_content test_utensil" id="utensil"></div>
              </div>
            </dv-border-box-1>
          </div>
          <div class="right_middle_content">
            <dv-border-box-1>
              <div class="every_border">
                <div class="every_title">
                  <dv-border-box-9 :color="['grey', 'blue']">
                    用 电 计 划 进 度
                  </dv-border-box-9>
                </div>
                <!-- 用水进度的内容 -->
                <div class="every_content ">
                  <div class="tab">
                    <div @click="change_tab_date(1)" :class="{ tab_isactive: istab === 1 }">
                      日
                    </div>
                    <div @click="change_tab_date(3)" :class="{ tab_isactive: istab === 3 }">
                      月
                    </div>
                    <div @click="change_tab_date(5)" :class="{ tab_isactive: istab === 5 }">
                      年
                    </div>
                  </div>
                  <div class="progress">
                    <div class="prog">
                      <div class="prog_title">A厂区</div>
                      <div class="prog_content">
                        <el-progress :text-inside="false" :show-text="false" :stroke-width="20" :class="[
                          'prog_picture',
                          prog_one1 ? 'back' : 'back0'
                        ]" :percentage="prog_one"></el-progress>
                      </div>
                      <div class="schedule_value">{{ prog_one }}%</div>
                    </div>
                    <div class="prog">
                      <div class="prog_title">B厂区</div>
                      <div class="prog_content">
                        <el-progress :text-inside="true" :show-text="false" :stroke-width="20" :class="[
                          'prog_picture',
                          prog_two1 ? 'back' : 'back0'
                        ]" :percentage="prog_two" status="success"></el-progress>
                      </div>
                      <div class="schedule_value">{{ prog_two }}%</div>
                    </div>
                    <div class="prog">
                      <div class="prog_title">C厂区</div>
                      <div class="prog_content">
                        <el-progress :text-inside="true" :show-text="false" :stroke-width="20" :class="[
                          'prog_picture',
                          prog_three1 ? 'back' : 'back0'
                        ]" :percentage="prog_three" status="warning"></el-progress>
                      </div>
                      <div class="schedule_value">{{ prog_three }}%</div>
                    </div>
                    <div class="prog">
                      <div class="prog_title">D厂区</div>
                      <div class="prog_content">
                        <el-progress :text-inside="true" :show-text="false" :stroke-width="20" :class="[
                          'prog_picture',
                          prog_four1 ? 'back' : 'back0'
                        ]" :percentage="prog_four" status="exception"></el-progress>
                      </div>
                      <div class="schedule_value">{{ prog_four }}%</div>
                    </div>
                  </div>
                </div>
              </div>
            </dv-border-box-1>
          </div>
          <div class="right_bottom_content">
            <dv-border-box-1 title="dv-border-box-11">
              <div class="every_border">
                <div class="every_title" @click="noProfit_data">
                  <dv-border-box-9 :color="['grey', 'blue']">
                    能 耗 定 额
                  </dv-border-box-9>
                </div>
                <div class="every_content ">
                  <div class="flow_data">
                    <dv-scroll-board v-if="noProfit.data.length" :config="noProfit" class="alarmScrollTable" />
                  </div>
                </div>
              </div>
            </dv-border-box-1>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
import { getAllProject } from "../request.js";
export default {
  name: "largeScreen",
  data() {
    return {
      win: window,
      baseurl: this.$baseurl,
      fullScreen: false,
      screenThree: false,
      timeoutId: null,
      //titleName:localStorage.getItem("fullScreenName") || "智慧农业大数据平台",
      titleName: "能耗监测平台",
      // 右上角的文字
      right_top: "关闭全屏",
      // 设备的数量
      equip_data_count: {
        alarm_equip_count: "",
        equip_count: "",
        offline_equip_count: "",
        online_equip_count: ""
      },
      nowtime: "",
      nowTimer: null,
      fromRouter: {
        name: "",
        path: ""
      },
      fromPage: "",
      fromOrder: "1",

      istab: 1,
      // 项目的所有数据
      options: [],
      // 控制切换项目的显示
      optionList: false,
      // 当前项目的id
      optionId: 1,
      optionName: "",
      // 瞬时流量的数据
      moment: {
        time: [],
        data: []
      },
      waterInfo: [
        {
          id: 213,
          equip_id: 96,
          equip_name: "一矿水位计",
          equip_code: "25102012402AC79C",
          last_data_time: "1714469582",
          sensor_name: "反向有功总电能",
          sensor_code: "4x00024@Slave1@96",
          usage: 4,
          water_type: 1,
          value: 2.91
        },
        {
          id: 214,
          equip_id: 96,
          equip_name: "一矿水位计",
          equip_code: "25102012402AC79C",
          last_data_time: "1714469582",
          sensor_name: "A相电流",
          sensor_code: "4x00024@Slave2@96",
          usage: 4,
          water_type: 1,
          value: 3.39
        },
        {
          id: 312,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "C相电压",
          sensor_code: "3x00001@Slave1@98",
          usage: 4,
          water_type: 5,
          value: 16.31
        },
        {
          id: 313,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "瞬时总无功功率",
          sensor_code: "3x00003@Slave1@98",
          usage: 4,
          water_type: 5,
          value: 249.71
        },
        {
          id: 314,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "B相电压",
          sensor_code: "4x00001@Slave2@98",
          usage: 4,
          water_type: 5,
          value: 6.62
        },
        {
          id: 316,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "正向有功总电能",
          sensor_code: "4x00001@Slave3@98",
          usage: 4,
          water_type: 5,
          value: 0
        },
        {
          id: 318,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "C相电流",
          sensor_code: "4x00001@Slave4@98",
          usage: 4,
          water_type: 5,
          value: 0
        },
        {
          id: 319,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "A相电流",
          sensor_code: "3x00003@Slave5@98",
          usage: 4,
          water_type: 5,
          value: 0.03
        },
        {
          id: 330,
          equip_id: 98,
          equip_name: "一矿水质监测",
          equip_code: "25102012412AC7EB",
          last_data_time: "1714469600",
          sensor_name: "B相电压",
          sensor_code: "4x00003@Slave2@98",
          usage: 4,
          water_type: 5,
          value: 15.21
        }
      ],
      // 分类用水图案的数据
      classification_water_type: [
        { value: 287, name: "A区" },
        { value: 356, name: "B区" },
        { value: 468, name: "C区" },
        { value: 521, name: "D区" }
      ],
      // 用水统计的数据
      waterCount: {
        total: 0,
        month: 0,
        today: 0
      },
      // 器具分类图案的数据
      utensil_type: [
        { value: 52, name: "A区" },
        { value: 24, name: "B区" },
        { value: 13, name: "C区" },
        { value: 61, name: "D区" }
      ],
      // 水质信息图案的数据
      article_type_X: [],
      article_type_Y: [],
      // 警报的数据
      alarm: {
        align: ["center", "center"],
        header: [
          "所属厂区",
          "设备名称",
          "报警类型",
          "报警内容",
          "触发值",
          "报警时间"
        ],
        data: [
          [
            "A厂区",
            "设备1",
            "限值报警",
            "4x00001等于1",
            "1",
            "2021-02-06 11:10:30"
          ],
          [
            "D厂区",
            "设备1",
            "限值报警",
            "4x00001等于1",
            "1",
            "2021-02-06 11:10:30"
          ],
          [
            "A厂区",
            "设备1",
            "限值报警",
            "4x00001等于1",
            "1",
            "2021-02-06 11:10:30"
          ],
          [
            "D厂区",
            "设备2",
            "限值报警",
            "4x00001等于0",
            "0",
            "2021-01-06 11:10:30"
          ],
          [
            "A厂区",
            "设备2",
            "限值报警",
            "4x00001等于0",
            "0",
            "2021-01-06 11:10:30"
          ],
          [
            "C厂区",
            "设备3",
            "限值报警",
            "4x00001等于0",
            "0",
            "2022-01-06 11:10:30"
          ],
          [
            "A厂区",
            "设备3",
            "限值报警",
            "4x00001等于0",
            "0",
            "2022-01-06 11:10:30"
          ],
          [
            "C厂区",
            "设备3",
            "限值报警",
            "4x00001等于0",
            "0",
            "2022-01-06 11:10:30"
          ],
          [
            "D厂区",
            "设备3",
            "限值报警",
            "4x00001等于1",
            "1",
            "2022-02-06 11:10:30"
          ],
          [
            "C厂区",
            "设备3",
            "限值报警",
            "4x00001等于1",
            "1",
            "2022-02-06 11:10:30"
          ]
        ],
        color: "red",
        headerBGC: "#11387c",
        oddRowBGC: "#051c4f",
        evenRowBGC: "#0f2b4e",
        align: "center,center",
        rowNum: 6,
        index: true,
        indexHeader: "序号",
        columnWidth: [80, 170, 240, 160, 300, 110, 300], //
        // columnWidth: ['10%', '10%', '30%', '12%', '18%', '7%', '22%'],//
        carousel: "single",
        headerHeight: 45,
        rowHeight: 45
        // rowNum: '5',
      },
      // 用水计划进度的数据展示
      prog_one: 60,
      prog_two: 50,
      prog_three: 40,
      prog_four: 70,
      prog_one1: false,
      prog_two1: false,
      prog_three1: false,
      prog_four1: false,
      //无收益日志相关数据
      noProfit: {
        align: ["center"],
        header: ["厂区", "用量", "金额"],
        data: [
          ["A厂区", "280 KWH", "600元"],
          ["D厂区", "220 KWH ", "700元"],
          ["C厂区", "320 KWH", "1000元"],
          ["A厂区", "280 KWH", "600元"],
          ["B厂区", "220 KWH", "700元"],
          ["D厂区", "320 KWH", "1000元"],
          ["A厂区", "280 KWH", "600元"],
          ["D厂区", "220 KWH", "700元"],
          ["C厂区", "320 KWH", "1000元"],
          ["B厂区", "220 KWH", "700元"]
        ],
        color: "red",
        headerBGC: "#11387c",
        oddRowBGC: "#051c4f",
        evenRowBGC: "#0f2b4e",
        align: "center",
        rowNum: 7,
        index: true,
        indexHeader: "序号",
        columnWidth: [70, 130, 120, 120], //
        carousel: "single",
        headerHeight: 45,
        rowHeight: 45
        // rowNum: '5',
      },
      // 用水计划进度数据
      water_config: {
        data: [
          {
            name: "生活",
            value: 0.1
          },
          {
            name: "生产",
            value: 0.2
          },
          {
            name: "绿化",
            value: 0.3
          },
          {
            name: "其他",
            value: 0.4
          }
        ],
        showValue: true
      },
      refresh: null
    };
  },

  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fromRouter.name = from.name;
      vm.fromRouter.path = from.path;
    });
  },

  created() {
    var that = this;
    this.fromOrder = this.$route.query.fromOrder;
    this.fromPage = this.$route.query.fromPage;
    that.getProject();
    setTimeout(() => {
      // 9.重新拿无收益日志的数据
      // that.getNoProfit()
      // // 2.水质信息
      // that.getWaterInfo()
      // // 5.拿分类瞬时流量
      // that.getInstantaneousFlow()
      // // 7.拿右上角 器具分类统计的信息
      // that.getUtensilType()
      // // 1.拿设备数量
      // that.get_equip_count()
      // // 3. 拿分类用水统计数据
      // that.getWaterTypeCount()
      // // 6.报警列表的数据
      // that.getAlarmList()
      // // 8.拿用水计划进度的数据
      // that.getWaterPlan()
      // // 4. 查询用水统计数据
      // that.getWaterCount()
    }, 200);
  },

  mounted() {
    var that = this;
    // 先小屏
    // document.exitFullscreen ?
    //     document.exitFullscreen() :
    //     document.mozCancelFullScreen ?
    //         document.mozCancelFullScreen() :
    //         document.mozkitExitFullscreen ?
    //             document.webkitExitFullscreen() : "";
    // that.screenThree = false;
    this.nowTimer = setInterval(function () {
      if (window.screen.width > 1440) {
        that.nowtime = that.getNowTime(true);
      } else {
        that.nowtime = that.getNowTime(false);
      }
    }, 1000);
    that.$nextTick(function () {
      setTimeout(() => {
        that.letFullScreen();
      }, 300);
    });

    setTimeout(() => {
      // 8.显示计划进度
      // that.change_tab_date(1)
      // 7.渲染器具类型的图
      that.lookUtensil();
      // 5.渲染分类的瞬时流量
      that.lookMoment();
      // 3.展示分类用水统计图
      that.lookClassificationWater();
      // 2.渲染水质信息的数据
      that.lookArticle();
    }, 1700);

    this.refresh = setInterval(this.function_group, 600000);
  },

  methods: {
    // 定时刷新
    async function_group() {
      var that = this;
      // 5. 清空
      that.looknull();
      // 5.拿新数据
      that.getInstantaneousFlow();
      // 4.变用水值
      await that.getWaterCount();
      // 2.水质信息
      that.getWaterInfo();
      // 5.重新赋值
      // that.lookMoment()
      setTimeout(() => {
        // 5.重新赋值
        that.lookMoment();
      }, 500);
    },
    // 清空图纸
    looknull() {
      // console.log('清空图纸');
      var chartDom = document.getElementById("moment_flow");
      // var option = {}
      var myChart = echarts.init(chartDom, null, {
        minwidth: 70,
        minheight: 100
      });
      myChart.clear();
      // option && myChart.setOption({
      //     series: [{ data: [] },
      //     { data: [] },
      //     { data: [] },
      //     { data: [] }
      //     ]
      // });
    },
    letFullScreen() {
      var that = this;
      //this.screenThree =document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
      //不能用page，将引起下拉框无法显示
      //var content = this.$refs.page;
      var content = document.documentElement;
      if (!that.screenThree) {
        //进入全屏,多重短路表达式
        (content.requestFullscreen && content.requestFullscreen()) ||
          (content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
          (content.webkitRequestFullscreen &&
            content.webkitRequestFullscreen()) ||
          (content.msRequestFullscreen && content.msRequestFullscreen());
        that.screenThree = true;
      } else {
        //CancelFullScreen?document.mozCancelFullScreen():
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.mozkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        that.screenThree = false;
      }
    },
    // 大小屏切换
    fullScreenThree() {
      var that = this;
      //this.screenThree =document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
      //不能用page，将引起下拉框无法显示
      //var content = this.$refs.page;
      var content = document.documentElement;
      if (!this.screenThree) {
        //进入全屏,多重短路表达式
        (content.requestFullscreen && content.requestFullscreen()) ||
          (content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
          (content.webkitRequestFullscreen &&
            content.webkitRequestFullscreen()) ||
          (content.msRequestFullscreen && content.msRequestFullscreen());
        this.screenThree = true;
      } else {
        //CancelFullScreen?document.mozCancelFullScreen():
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.mozkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        this.screenThree = false;
      }
    },
    // 拿到项目数据
    getProject() {
      var that = this;
      this.options = [];
      getAllProject()
        .then(data => {
          this.options = data;

          this.optionId = data[0].value;
          this.optionName = data[0].label;

          // for (let i = 0, len = this.options.length; i < len; i++) {
          //     if (this.hasDefault) {
          //         break;
          //     }
          //     this.getFirstDefault(this.options[i]);
          // }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击切换项目
    changeMining() {
      var that = this;
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }

      this.optionList = !this.optionList;

      this.timeoutId = setTimeout(function () {
        that.optionList = false;
      }, 5000);
    },
    // 选择项目
    changeOption(item, e) {
      setTimeout(function () {
        that.optionList = false;
      }, 100);
      var that = this;
      this.optionId = item.value;
      this.optionName = item.label;
      // 切换项目后的操作
      setTimeout(() => {
        // 1.查设备统计
        that.get_equip_count();
        // 5.拿分类瞬时流量
        that.getInstantaneousFlow();
        // 5. 清空
        that.looknull();
        // 5.重新赋值
        // that.lookMoment()
        // 4. 查询用水统计数据
        that.getWaterCount();
        // 9.重新拿无收益日志的数据
        that.getNoProfit();
        // 7. 查询器具分类数据
        that.getUtensilType();
        // 3. 拿分类用水统计数据
        that.getWaterTypeCount();
        // 6. 查报警列表
        that.getAlarmList();
        // 8. 查用水计划进度的数据
        // that.getWaterPlan()

        // 2. 水质信息
        that.getWaterInfo();
      }, 200);
      setTimeout(() => {
        // 3.展示分类用水统计图
        that.lookClassificationWater();
        // 7. 渲染器具分类数据
        that.lookUtensil();
        // 5.渲染分类的瞬时流量
        that.lookMoment();
      }, 1700);
      // 切换之后的一系列操作
      // await this.getEquip(this.optionId);
      //this.lineForm.device = [];
      // if (this.topTab != "data") {
      //     setTimeout(function () {
      //         that.chooseTab(that.topTab);
      //     }, 1000);
      // }
    },
    // 去监控中心
    goData() {
      var that = this;
      // if (document.fullScreen ||
      //     document.mozFullScreen ||
      //     document.webkitIsFullScreen) {
      //     document.exitFullscreen ? document.exitFullscreen() :
      //         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //             document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';

      // }
      that.$router.push({
        name: "mainData",
        path: "mainData"
      });
    },
    // 退出
    goExit() {
      var that = this;

      // if (document.fullScreen ||
      //     document.mozFullScreen ||
      //     document.webkitIsFullScreen) {
      //     that.right_top = '退出大屏',
      //         document.exitFullscreen ? document.exitFullscreen() :
      //             document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //                 document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';

      // } else
      if (
        // }
        //console.log('this.fromRouter.name', this.fromRouter);
        // if (this.fromRouter.name != "Login") {
        // this.$router.push({
        //     name: that.fromRouter.name,
        //     path: that.fromRouter.path
        // });
        this.fromRouter.name == "mainData" ||
        this.fromRouter.name == "showData" ||
        this.fromRouter.name == "Login"
      ) {
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.mozkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        this.$router.push({
          name: "device",
          path: "device"
        });
        localStorage.setItem("indexPath", "7-1");
      } else {
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.mozkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        this.$router.push({
          name: "device",
          path: "device"
        });
        localStorage.setItem("indexPath", "7-1");

        // this.$router.push({
        //     name: that.fromRouter.name,
        //     path: that.fromRouter.path,
        //     // component: that.fromPage
        // });
        // localStorage.setItem("indexPath", this.fromOrder);
      }
    },
    // 点击设备统计
    equip_data() {
      // if (document.fullScreen ||
      //     document.mozFullScreen ||
      //     document.webkitIsFullScreen) {l
      //     document.exitFullscreen ? document.exitFullscreen() :
      //         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //             document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
      // }
      // this.$router.push({
      //     name: 'device',
      //     path: 'device'
      // });
      // localStorage.setItem("indexPath", '7-1');
    },

    // 点击了报警列表的标题
    alarm_data() {
      // if (document.fullScreen ||
      //     document.mozFullScreen ||
      //     document.webkitIsFullScreen) {
      //     document.exitFullscreen ? document.exitFullscreen() :
      //         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //             document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
      // }
      // this.$router.push({
      //     name: 'alarm',
      //     path: 'alarm'
      // });
      // localStorage.setItem("indexPath", '4');
    },
    // 点击器具分类统计标题
    utensil_data() {
      // if (document.fullScreen ||
      //     document.mozFullScreen ||
      //     document.webkitIsFullScreen) {
      //     document.exitFullscreen ? document.exitFullscreen() :
      //         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //             document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
      // }
      // this.$router.push({
      //     name: 'utensil',
      //     path: 'utensil'
      // });
      // localStorage.setItem("indexPath", '16');
    },
    // 点击无收益日志的标题
    noProfit_data() {
      // if (document.fullScreen ||
      //     document.mozFullScreen ||
      //     document.webkitIsFullScreen) {
      //     document.exitFullscreen ? document.exitFullscreen() :
      //         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //             document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
      // }
      // this.$router.push({
      //     name: 'noProfit',
      //     path: 'noProfit'
      // });
      // localStorage.setItem("indexPath", '15');
    },
    // 拿到设备统计的数量
    get_equip_count() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/equip/count",
        data: {
          project_id: that.optionId
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // console.log('设备数量', res)
            this.equip_data_count = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 拿器具分类统计的数据
    getUtensilType() {
      // console.log('7777777')
      var that = this;
      this.$http({
        method: "post",
        url: "api/instrumentType/all",
        data: { project_id: that.optionId }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // console.log('leixing', res)
            const result = res.data.data.map(item => {
              return {
                name: item.instrument_type_name,
                value: item.instruments_count
              };
            });
            // console.log('zhi', result)
            this.utensil_type = result;
          }
        })
        .catch(error => {
          console.log(error);
          this.tableData = [];
        });
    },
    // 拿水质信息的数据
    getWaterInfo() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/board/waterInfo",
        data: { project_id: that.optionId }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // console.log('2222222222', res)
            that.waterInfo = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 拿分类用水统计的数据
    getWaterTypeCount() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/board/waterTypeCount",
        data: { project_id: that.optionId }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            let water_type_count = res.data.data.map(item => {
              return {
                name: item.title,
                value: item.value
              };
            });
            that.classification_water_type = water_type_count;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 拿到用水统计
    getWaterCount() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/board/waterCount",
        data: { project_id: that.optionId }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // console.log('用水统计', res)
            that.waterCount = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 拿实时流量
    getInstantaneousFlow() {
      var that = this;
      that.moment.time = [];
      that.moment.data = [];
      this.$http({
        method: "post",
        url: "api/board/instantaneousFlow",
        data: {
          project_id: that.optionId
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // 处理数据
            let newArray = [[], [], [], []];
            let timeArray = [];
            // res.data.data.forEach(item => {
            //     newArray[0].push(item.data["0"]); // 将键为 "1" 的值添加到第一个子数组
            //     newArray[1].push(item.data["1"]); // 将键为 "2" 的值添加到第二个子数组
            //     newArray[2].push(item.data["2"]); // 将键为 "3" 的值添加到第三个子数组
            //     newArray[3].push(item.data["3"]); // 将键为 "4" 的值添加到第四个子数组
            // });
            for (const key in res.data.data) {
              const item = res.data.data[key]; // 获取当前对象
              // 确保当前对象中有"data"字段且是数组
              if (item.data && Array.isArray(item.data)) {
                // 将"data"数组中对应键为 "0", "1", "2", "3" 的值分别添加到四个不同的子数组中
                newArray[0].push(item.data[0]);
                newArray[1].push(item.data[1]);
                newArray[2].push(item.data[2]);
                newArray[3].push(item.data[3]);
              }
              let time1 = res.data.data[key].time;
              let formattedTime = time1.substring(5, time1.length - 3);
              timeArray.push(formattedTime);
            }

            that.moment.time = timeArray;
            that.moment.data = newArray;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 拿到报警列表的数据
    getAlarmList() {
      var that = this;

      that.alarm.data = [];
      this.$http({
        method: "post",
        url: "api/alarm/list",
        data: {
          equip: "",
          limit: 20,
          page: 1,
          project_id: this.optionId
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            if (!res.data.data.list.length) {
              that.alarm.data = [["", "暂", "无", "数", "据", ""]];
              // that.alarm.index=false
              // this.$set(that.alarm, "data", [["", "d", "r", "f", "y", ""]]);
              // this.$forceUpdate()
              return;
            } else {
              var bian = res.data.data.list;
              var alarmdata = bian.map(function (item) {
                return [
                  item.project.project_name,
                  item.equip.equip_name,
                  item.alarm_type_text,
                  item.alarm_content,
                  item.alarm_value,
                  item.alarm_time
                ];
              });

              that.alarm.data = alarmdata;
              //this.$forceUpdate()
              // console.log('报警数据2', that.alarm)
            }
            // console.log('报警数据', that.alarm.data)
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查用水计划进度的数据
    getWaterPlan() {
      var that = this;
      (that.prog_one = 20),
        (that.prog_two = 40),
        (that.prog_three = 70),
        (that.prog_four = 30),
        (that.prog_one1 = false),
        (that.prog_two1 = false),
        (that.prog_three1 = false),
        (that.prog_four1 = false),
        this.$http({
          method: "post",
          url: "api/plan/schedule",
          data: {
            date_type: that.istab,
            project_id: that.optionId
          }
        })
          .then(res => {
            if (res && res.data.result == "success") {
              // console.log('用水计划进度', res)
              if (res.data.data[0].used_rate > 0) {
                that.prog_one1 = true;
              }
              if (res.data.data[1].used_rate > 0) {
                that.prog_two1 = true;
              }
              if (res.data.data[2].used_rate > 0) {
                that.prog_three1 = true;
              }
              if (res.data.data[3].used_rate > 0) {
                that.prog_four1 = true;
              }

              that.prog_one = res.data.data[0].used_rate;
              that.prog_two = res.data.data[1].used_rate;
              that.prog_three = res.data.data[2].used_rate;
              that.prog_four = res.data.data[3].used_rate;
              // for (let i = 0; i < res.data.data.length; i++) {
              //     if (res.data.data[i].usage == 1) {
              //         that.prog_one = res.data.data[i].volume
              //     } else if (res.data.data[i].usage == 2) {
              //         that.prog_two = res.data.data[i].volume
              //     } else if (res.data.data[i].usage == 3) {
              //         that.prog_three = res.data.data[i].volume
              //     } else if (res.data.data[i].usage == 4) {
              //         that.prog_four = res.data.data[i].volume
              //     }
              // }
            }
          })
          .catch(error => {
            console.log(error);
          });
    },
    // 点击切换计划进度的类型   (日 月 年)
    change_tab_date(eee) {
      // console.log('切换计划的按钮')
      var that = this;
      this.istab = eee;
      // 切换之后 重新渲染
      // this.getWaterPlan()
      console.log("切换eeee", eee);
      // this.getWaterPlan()
      if (eee == 1) {
        (that.prog_one = 60),
          (that.prog_two = 50),
          (that.prog_three = 40),
          (that.prog_four = 70);
      } else if (eee == 3) {
        (that.prog_one = 50),
          (that.prog_two = 20),
          (that.prog_three = 30),
          (that.prog_four = 60);
      } else if (eee == 5) {
        (that.prog_one = 40),
          (that.prog_two = 30),
          (that.prog_three = 60),
          (that.prog_four = 20);
      }
      // 提示
      // this.$notify({
      //     // title: '用水计划进度',
      //     dangerouslyUseHTMLString: true,
      //     message: '<strong  style=" color: #fff;">切换到&nbsp;' +
      //         '<span style="font-size: 21px; color: #fab325;">' + this.optionName + '</span>' +
      //         '&nbsp;项目的<br>' +
      //         '<span style="font-size: 21px; color: #00e391;"> &nbsp;' +
      //         (this.istab === 1 ? '每日' : this.istab === 3 ? '每月' : '每年') +
      //         '&nbsp;</span>' +
      //         '计划进度</strong>',
      //     duration: 2500,
      //     customClass: 'Notification',
      // });
    },
    // 渲染器具类型的图
    lookUtensil() {
      var chartDom = document.getElementById("utensil");
      var option = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} 个"
          formatter: function (params) {
            return (
              "厂区电表数量" +
              "<br/>" +
              '<span style="color: #ffe3b8;">' +
              params.name +
              "</span>" +
              " : " +
              '<span style="color: #00e391;">' +
              params.value +
              "个" +
              "</span>"
            ); // 设置字体颜色为红色
          }
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "10%"
        },
        legend: {
          top: "center",
          left: "2%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "#fff"
          }
        },
        color: [
          "#248cc9",
          "#efd779",
          "#00e391",
          "#fab325",
          "#0190f8",
          "#00dde6",
          "#7f58e5",
          "#eb6f49"
        ],
        toolbox: {
          // show: true,
          // feature: {
          //     mark: { show: true },
          //     dataView: { show: true, readOnly: false },
          //     restore: { show: true },
          //     saveAsImage: { show: true }
          // }
        },
        series: [
          {
            name: "器具类型数量",
            type: "pie",
            // radius: [40, 80],
            radius: ["40%", "70%"],
            center: ["62%", "50%"],
            // roseType: 'area',

            itemStyle: {
              borderRadius: 20,
              borderColor: "#021b44",
              borderWidth: 6
            },
            data: this.utensil_type
          }
        ]
      };

      var myChart = echarts.init(chartDom, null, {
        minwidth: 70,
        minheight: 100
      });
      option && myChart.setOption(option);
      // 处理点击事件并且跳转到相应的百度搜索页面
      // myChart.on('click', function (params) {
      //     // console.log('点击器具分类', params.name);
      //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
      // });
    },
    // 渲染水质信息的数据
    lookArticle() {
      var that = this;
      var chartDom = document.getElementById("article");
      var option = {
        xAxis: {
          type: "category",
          data: this.article_type_X,
          axisLabel: {
            textStyle: {
              color: "#fff" // 设置横坐标字体颜色为红色
            }
          }
        },
        yAxis: {
          type: "value",
          interval: 1, // 设置坐标轴刻度之间的显示间隔为整数，即不显示小数

          length: 30, // 设置刻度线长度为10
          axisLabel: {
            textStyle: {
              color: "#fff" // 设置纵坐标字体颜色为蓝色
            }
          }
        },
        legend: {
          top: "15%",
          left: "2%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item",
          // formatter: "文章数量 <br/>{b} : {c} 个",
          formatter: function (params) {
            return (
              "文章数量" +
              "<br/>" +
              params.name +
              " : " +
              '<span style="color: #00e391;">' +
              params.value +
              "个" +
              "</span>"
            ); // 设置字体颜色为红色
          },
          axisPointer: {
            type: "shadow" // 设置指示器类型为阴影
          }
        },
        series: [
          {
            data: this.article_type_Y,
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#248cc9" }, // 起始颜色
                { offset: 1, color: "#48e1ec" } // 结束颜色
              ]),
              barBorderRadius: 12, // 设置柱子圆角
              shadowColor: "rgba(0, 0, 0, 0.7)", // 设置阴影颜色
              shadowBlur: 15 // 设置阴影模糊大小
            },
            barWidth: "40%"
          }
        ]
      };

      var myChart = echarts.init(chartDom, null, {
        minwidth: 70,
        minheight: 100
      });
      option && myChart.setOption(option);
      myChart.on("click", function (params) {
        // console.log('点击水质信息', params.name);
        window.open(
          "https://www.baidu.com/s?wd=" + encodeURIComponent(params.name)
        );
      });
    },
    // 渲染分类的瞬时流量
    lookMoment() {
      var chartDom = document.getElementById("moment_flow");
      // option && myChart.setOption('');
      // console.log('11111111渲染分类的瞬时流量');

      //    moment_flow
      var charts = {
        unit: "单位 : KWH",
        names: ["A区", "B区", "C区", "D区"],
        // lineX: this.moment.time,
        // value: this.moment.data
        lineX: [
          " 00:00",
          " 00:15",
          " 00:30",
          " 00:45",
          " 01:00",
          " 01:15",
          " 01:30",
          " 01:45",
          " 02:00",
          " 03:15",
          " 03:30"
        ],
        value: [
          [51, 52, 55, 60, 66, 60, 55, 50, 48, 47, 50],
          [45, 43, 44, 48, 50, 46, 41, 48, 55, 52, 55],
          [33, 32, 35, 34, 34, 33, 36, 31, 36, 33, 33],
          [24, 22, 17, 24, 22, 19, 27, 20, 25, 22, 23]
        ]
      };
      var color = [
        "rgba(41, 197, 224",
        "rgba(36, 140, 201",
        "rgba(0, 227, 145",
        "rgba(239, 215, 121"
      ];
      var lineY = [];

      for (var i = 0; i < charts.names.length; i++) {
        var x = i;
        if (x > color.length - 1) {
          x = color.length - 1;
        }
        var data = {
          name: charts.names[i],
          type: "line",
          //  stack: '总量',
          color: color[x] + ")",
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[x] + ", 0.3)"
                  },
                  {
                    offset: 0.8,
                    color: color[x] + ", 0)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          symbol: "circle",
          symbolSize: 5,
          data: charts.value[x],
          // 添加 lineStyle 属性
          lineStyle: {
            width: 1.2 // 设置线的粗细
          }
        };
        lineY.push(data);
      }
      // console.log('循环结束', lineY)
      var option = {
        title: {
          text: "各 区 瞬 时 用 电 量",
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
          left: "center",
          top: "1%"
        },
        textStyle: {
          color: "#efd779" // 设置单位颜色
        },
        backgroundColor: "rgb(183, 183, 183,0)",
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: charts.names,
          icon: "rect",
          textStyle: {
            fontSize: 10,
            fontWeight: "200",
            color: "#fff"
          },
          //right: 'center',
          type: "scroll",
          // 设置为 single
          align: "left",
          itemWidth: 15,
          itemHeight: 10,
          right: 10
        },
        grid: {
          top: "12%",
          left: "4%",
          right: "4%",
          bottom: "1%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: charts.lineX,
          splitLine: {
            lineStyle: {
              color: "rgb(183, 183, 183)"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            },
            formatter: function (params) {
              return params.split(" ")[0] + "\n" + params.split(" ")[1];
            }
          }
        },
        yAxis: {
          name: charts.unit,
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff"
            }
          },
          splitLine: {
            show: false
            // lineStyle: {
            //     color: 'rgba(183, 183, 183,0.3)',
            //     type: 'dashed',

            // },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(183, 183, 183,0.3)"
            }
          }
        },
        series: lineY
      };
      var myChart = echarts.init(chartDom, null, {
        minwidth: 70,
        minheight: 100
      });
      option && myChart.setOption(option);
    },
    // 分类用水
    lookClassificationWater() {
      var that = this;
      var chartDom = document.getElementById("classification_water");
      var option = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} 个"
          formatter: function (params) {
            return (
              "分区用电量" +
              "<br/>" +
              '<span style="color: #ffe3b8;">' +
              params.name +
              "</span>" +
              " : " +
              '<span style="color: #00e391;">' +
              params.value + ' ' +
              "KWH" +
              "</span>"
            ); // 设置字体颜色为红色
          }
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "10%"
        },
        legend: {
          top: "center",
          left: "2%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "#fff"
          }
        },
        color: [
          "#248cc9",
          "#efd779",
          "#00e391",
          "#fab325",
          "#0190f8",
          "#00dde6",
          "#7f58e5",
          "#eb6f49"
        ],
        toolbox: {
          // show: true,
          // feature: {
          //     mark: { show: true },
          //     dataView: { show: true, readOnly: false },
          //     restore: { show: true },
          //     saveAsImage: { show: true }
          // }
        },
        series: [
          {
            // name: "累计用水量",
            type: "pie",
            // radius: [40, 80],
            radius: ["20%", "70%"],
            center: ["56%", "50%"],
            roseType: "area", //area,radius环形占比
            itemStyle: {
              borderRadius: 38
            },
            //
            data: this.classification_water_type
          }
        ]
      };

      var myChart = echarts.init(chartDom, null, {
        minwidth: 70,
        minheight: 100
      });
      option && myChart.setOption(option);
      // myChart.on('click', function (params) {
      //     // console.log('点击分类用水', params);
      //     if (that.fullScreen) {
      //         document.exitFullscreen ? document.exitFullscreen() :
      //             document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      //                 document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
      //     }
      //     that.$router.push({
      //         name: 'waterPlan',
      //         path: '/waterPlan',
      //         component: 'waterPlan'
      //     });
      //     localStorage.setItem("indexPath", '18');

      // });
    },
    // 9.拿无收益数据
    getNoProfit() {
      var that = this;
      that.noProfit.data = [];
      this.$http({
        method: "post",
        url: "api/loss/list",
        data: {
          project_id: that.optionId,
          limit: 20
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            if (res.data.data.length > 0) {
              let noProfit = [];
              res.data.data.list.forEach(item => {
                let valuesArr = [
                  item.project.project_name.toString(),
                  item.usage_text.toString(),
                  item.volume.toString(),
                  item.amount.toString()
                ];
                noProfit.push(valuesArr);
              });
              that.noProfit.data = noProfit;
            } else {
              that.noProfit.data = [["暂", "无", "数", "据"]];
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  // 关闭页面
  beforeDestroy() {
    clearInterval(this.refresh);
  }
};
</script>

<style scoped>
@media all and (max-width: 1440px) {
  .titleName {
    font-size: 0.42rem !important;
  }

  .pie_title>span,
  .alarm_head>span {
    font-size: 0.16rem !important;
  }
}

.page {
  width: 100%;
  height: 100%;
  /* background-color: #0b2c51; */
  background-color: #001942;
  /* background-image: url('../../static/bg.jpg'); */
  /* opacity: 0.9; */
  /* background-color: rgba(255, 0, 0, 0.5); */
  /* background-image: linear-gradient(90deg, #3a6952, #455468, #42635f, #3b4e86);
    background-size: 500%;
    animation: animate 3s infinite;
    background-repeat: no-repeat; */
  /* background-size: 100vw 100%; */
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  /* overflow-y: hidden; */
  /* border: 1px solid blue; */
}

.page::after {
  content: "";
  background: url("../../static/bg.jpg") no-repeat center center/cover;
  opacity: 0.08;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

/* 整个选择框的样式 */
.optionListBox {
  min-width: 220px;
  max-width: 300px;
  font-size: 0.35rem;
  color: #eee;
  /* position: absolute; */
  top: 1.2rem;
  right: 5.72rem;
  height: auto;
  /* background-color: rgba(0, 0, 0, 0.3); */
  padding: 0.1rem;
  /* transition:all 500ms linear; */
  min-height: 60px;
  position: fixed;
  /* top: 1.4rem; */
  background-color: rgba(5, 37, 81, 0.8);
  /* border:1px solid red; */
  /* transition:all 500ms linear; */
  z-index: 9999999999 !important;
}

/* 未选中的通用样式 */
.oneView {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-top: 0.2rem;
  text-align: center;
  /* background-color: rgba(0,191,255,0); */
  cursor: pointer;
  /* box-shadow:0 0 5px 2px inset #00D8d8; */
  /*deepskyblue透明度0.5*/
  /* background-color:rgba(0,191,255,1); */
  border-radius: 4px;
  padding: 0 0.2rem;
  border: 2px;
  box-sizing: border-box;
}

.oneView:hover {
  border: 2px solid #2b9ccf;
  box-sizing: border-box;
}

.oneView:first-child {
  margin-top: 0;
}

/* 当前选中的项目 */
.active_2 {
  color: #75ffff !important;
  background-color: rgba(19, 128, 128, 1);
  border: 2px solid rgba(39, 154, 221, 1);
  /* border: 1px solid; */
  box-sizing: border-box;
  /* box-shadow: 0 0 5px 5px inset #00d8d8; */
  /* border: none; */
  /* border: 1px solid deepskyblue; */
}

@keyframes animate {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.content {
  width: 99.5%;
  height: calc(100% - 1.54rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
  /* border: 2px solid red; */
  font-size: 0.32rem;
}

.titleBar {
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 0 0.3rem;
  background-image: url("../../static/title_01.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  /* text-align:center; */
  /* border: 1px solid red; */
}

.titleName {
  display: inline-block;
  width: 50%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translateX(-50%);
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.62rem !important;
  font-weight: 700;
  letter-spacing: .1rem;
  text-shadow: 6px 6px 6px rgba(0, 0, 0, 1) !important;
  /* border: 1px solid red; */
}

.exit {
  width: 2.2rem;
  float: right;
  margin-top: 0.2rem;
  text-align: center;
  padding: 0;
  height: 0.76rem;
  line-height: 0.7rem;
  font-size: 0.34rem;
  font-weight: 700;
  cursor: pointer;
  /* background-color: #0c285B; */
  color: #fff;
  border: 3px solid rgb(97 97 196);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.exit:hover {
  background-color: transparent;
  color: deepskyblue;
}

.exit:hover i {
  color: deepskyblue !important;
}

.changeWin {
  width: 0.7rem;
  z-index: 999999 !important;
  color: red !important;
  font-size: 0.4rem !important;
  margin-left: 0.4rem;
}

.changeWin>img {
  width: 0.5rem;
  height: 0.5rem;
}

.changeWin:hover {
  color: #0c285b !important;
}

.left_content,
.middle_content,
.right_content {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  user-select: none !important;
}

.left_content>div,
.right_content>div {
  width: 100%;
  height: 31.4%;
  position: relative;
  color: #fff;
  /* border: 1px solid red; */
  background-color: #021b44 !important;
  border-radius: 6px;
}

.middle_content {
  width: 54%;
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  color: #fff;
  /* border: 1px solid red; */
}

.middle_top_content {
  width: 100%;
  height: 65.6%;
  /* border: 1px solid rgb(21, 222, 95); */
  border-radius: 16px;
  /* background-image: linear-gradient(90deg, #3a6952, #455468, #42635f, #3b4e86);
    background-size: 500%;
    animation: animate 3s infinite;
    background-repeat: no-repeat;
    background-size: 100vw 100%; */
}

.water_all_data {
  height: 45%;
  width: 100%;
  /* border: 1px solid rgb(21, 222, 95); */
}

.moment_flow {
  height: 55%;
  width: 100%;
  /* color: #fff !important; */
  /* border: 1px solid rgb(21, 222, 95); */
  /* background-color: #021b44 !important; */
}

.moment_data {
  /* border: 1px solid rgb(21, 222, 95); */
  /* color: #fff !important; */
}

/* .moment_data>>>div { */
/* color: #fff !important; */
/* } */

.middle_bottom_content {
  width: 100%;
  height: 31.4%;
  /* border: 1px solid rgb(236, 59, 59); */
  border-radius: 6px;
}

.left_content,
.right_content {
  width: 22%;
  /* border: 1px solid red; */
}

.every_border {
  position: relative;
  width: 99%;
  height: 100%;
  margin: 0.2vh auto;
  padding-top: 1vh;
  /* border: 0px solid #11578d; */
  /* border: 1px solid yellow; */
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(7, 41, 113, 0.5),
    inset 0 0 20px rgba(15, 60, 118, 0.5), inset 0 0 30px rgba(27, 54, 129, 0.5);
}

.every_title {
  position: absolute;
  top: -0.42rem;
  /* right: 50% !important; */
  margin-left: 24%;
  width: 52%;
  height: 0.7rem;
  line-height: 0.7rem;
  /* border: 1px solid red; */
  /* margin: -20px auto; */
  /* margin: 0 auto; */
  font-size: 0.36rem;
  font-weight: bold;
  text-align: center;
  /* border-radius: 100px; */
  z-index: 999999;
  /* border: 1px solid #11578d; */
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.every_title:hover {
  transform: scale(1.1);
}

.every_content {
  width: 98%;
  height: calc(99% - 24px);
  /* margin: 16px auto 0; */
  margin: 16px auto 0;
  /* border: 1px solid red; */
  position: relative;
}

/* 设备的样式 */
.equip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* border: 1px solid #008000; */
  padding: 0.4rem 0.6rem 0.4rem;
}

.equip>div:nth-child(1) {
  color: #248cc9;
}

.equip>div:nth-child(2) {
  color: #00f99f;
}

.equip>div:nth-child(3) {
  color: #ee468e;
}

.equip>div:nth-child(4) {
  color: #fab325;
}

.equip_zhi {
  width: 42%;
  height: 46%;
  /* border: 1px solid red; */
  background-image: url("../../static/equip_back.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  /* padding: .2rem 0 .4rem; */
  font-size: 0.34rem;
  display: flex;
  flex-direction: column;
  align-content: space-around;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.equip_zhi:hover {
  transform: scale(1.1);
}

.equip_title {
  margin-top: 18%;
  height: 30%;
  width: 100%;
  font-weight: 600;
  /* border: 1px solid red; */
  /* display: flex;
    align-items: center;
    text-align: center; */
}

.equip_number {
  height: 30%;
  width: 100%;
  /* border: 1px solid red; */
  /* font-size: .4rem; */
  font-weight: 600;
}

.waterDetails {
  width: 96%;
  /* height: 100%; */
  /* border: 1px solid #dc225a; */
  display: flex;
  justify-content: space-evenly;
}

.water_data {
  width: 30%;
  height: 100%;
  padding: 2% 0 0 0.6%;
  /* line-height: 100%; */
  /* border: 1px solid red; */
}

.water_data>div {
  width: 5rem;
  height: 5rem;

  margin: 0 auto;
}

.decoration {
  width: 100% !important;
  height: 100% !important;
}

@media only screen and (max-width: 1000px) {
  .decoration {
    width: 60% !important;
    height: 60% !important;
    margin-left: 10% !important;
  }

  .number_zhi1,
  .number_zhi2,
  .number_zhi3 {
    font-size: 0.32rem !important;
  }
}

.number_zhi1 {
  /* color: #5140f1; */
  color: #248cc9;
  font-weight: 600;
  font-size: 0.52rem;
}

.number_zhi2 {
  color: #f58454;
  font-weight: 600;
  font-size: 0.52rem;
}

.number_zhi3 {
  /* color: #22c196; */
  color: #00e391;

  font-weight: 600;
  font-size: 0.52rem;
}

/* 流动列表外面的一个框 */
.flow_data {
  width: 100%;
  height: 100% !important;
  /* border: 1px solid #008000; */
  /* padding-top: 10px; */
  box-sizing: border-box;
}

.flow_data>>>.dv-scroll-board {
  width: 99% !important;
}

/* 用水计划进度的右上角的切换按钮 */
.tab {
  position: absolute;
  width: 32%;
  height: 12%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  /* float: right; */
  /* margin-right: 4%; */
  z-index: 9999;
  right: 6%;
  top: -10%;
  /* border: 1px solid green; */
}

.tab>div {
  cursor: pointer;
  width: 33%;
  /* height: 100%; */
  display: block;
  text-align: center;
  align-items: center;
  border: 1px solid #42acc5;
  border-radius: 6px;
  margin-left: 6px;
}

.tab_isactive {
  background-color: rgb(76, 117, 230);
}

/* 进度条的框框 */
.progress {
  /* border: 1px solid red; */
  height: 86%;
  width: 88%;
  margin: 10% auto;
  /* padding-top: 2%; */
}

.prog {
  width: 100%;
  height: 25%;
  /* border: 1px solid green; */
  text-align: left;
  display: flex;
  align-items: center;
}

.prog_title {
  width: 16%;
  height: 100%;
  /* border: 1px solid blue; */
  display: flex;
  align-items: center;
  text-align: right;
}

.prog_content {
  width: 70%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  /* border: 1px solid white; */
}

.prog_picture {
  /* margin-top: 7.2%; */
}

/* 无收益列表 */
.alarmScrollTable {
  /* border: 1px solid red; */
  height: 100% !important;
  /* margin-top: 10px !important; */
  color: #fff;
  user-select: none;
  border-radius: 10px;
  box-sizing: border-box;
}

.alarmScrollTable>>>.row-item {
  height: 46px !important;
  line-height: 46px !important;
}

.every_content>>>.dv-scroll-board {
  border-radius: 10px !important;
  /* margin-top: 10px !important; */
  overflow: hidden;
  width: 96%;
  height: 100% !important;
  margin: 0 auto;
  /* border: 1px solid #008000; */
}

.water_info {
  padding: 0 0 0 12px;
  /* border: 1px solid #008000; */
  width: 100%;
  height: 92%;
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-gap: calc((10%) / 3);
  overflow: hidden;
  overflow-y: scroll;
  /* 设置隐藏 */
  /* 添加垂直方向滚动 */
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

.water_info::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.every_water_info {
  border: 2px solid #28457a;

  /* box-shadow: inset 10 10 5px rgba(232, 12, 12, 0.1); */
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(7, 41, 113, 0.5),
    inset 0 0 20px rgba(15, 60, 118, 0.5), inset 0 0 30px rgba(27, 54, 129, 0.5);
  /* box-shadow: 0 0 5px rgba(222, 11, 11, 0.1); */
  /* 添加阴影效果 */
  width: 100%;
  /* height: 100%; */
  height: 8vh;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::-webkit-scrollbar {
  width: 6px;
  border-radius: 5px;
  /* 滚动条宽度 */
}

/* 设置滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #225ca1;
  /* 滑块颜色 */
}

/* 设置滚动条轨道背景 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 轨道背景颜色 */
}

.water_info_top {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 50%;
  width: 100%;
}

.water_info_value {
  font-size: 0.46rem;
  font-weight: 600;
  /* color: #248cc9; */
  /* color:  #00e391; */

  color: #efd779;
}

.water_info_unit {
  padding-top: 0.1rem;
}

.water_info_bottom {
  display: flex;
  justify-content: start;
  align-items: center;

  height: 50%;
  width: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  /* 防止换行 */
  text-overflow: ellipsis;
  font-size: 0.34rem;
}

/* 没有数据时候的样式 */
.no_wanter_info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0.28rem;
  /* color: #efd779; */
  font-weight: 600;
  letter-spacing: 0.04rem;
  /* 设置文字间距 */
  /* text-shadow: 0px 3px 2px rgba(255, 255, 255, 0.8); */
  /* 添加发光效果 */
}

/* 进度条文字的颜色 */
.prog_picture>>>.el-progress-bar__innerText {
  color: rgb(13, 8, 9) !important;
  font-weight: 600;
}

/* 没值的背景颜色 */
.back0>>>.el-progress-bar__outer {
  background-color: #fff !important;
}

/* 有值之后的背景颜色 */
.back>>>.el-progress-bar__outer {
  /* background-color: rgb(140 88 88) !important; */
  background-color: rgb(48 71 113) !important;
}

/* 显示后面进度的文字 */
.schedule_value {
  height: 40%;
  width: 13%;
  padding-left: 0.06rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* border: 1px solid red; */
  font-size: 0.32rem;
}
</style>
<style>
.Notification {
  border: 0;
  background-color: #4e55c1 !important;
  color: #fff !important;
}
</style>
